<template>
  <div class="AirlinesDiv">
    <h1 style="margin: 1% 0">客服管理</h1>
    <div class="divContent herdericon">
      <span class="iconfont icon-add-s" @click="toaddAirlines">新增</span>
      <div class="Menus">
        <a href="#" class="iconfont icon-sousuo"></a>
        <el-input placeholder="查找...."></el-input>
      </div>
    </div>
    <div class="divContent">
      <el-table
        style="width: 100%"
        :header-cell-style="{ 'background-color': '#f7f7f7' }"
      >
        <el-table-column prop="name" label="类型"> </el-table-column>
        <el-table-column prop="address" label="客服编号" width="250">
        </el-table-column>
        <el-table-column prop="address" label="标题" width="250">
        </el-table-column>
        <el-table-column prop="address" label="客户"> </el-table-column>
        <el-table-column prop="address" label="服务方式"> </el-table-column>
        <el-table-column prop="address" label="来源"> </el-table-column>
        <el-table-column prop="address" label="服务日期" width="150px">
        </el-table-column>
        <el-table-column prop="address" label="创建人"> </el-table-column>
        <el-table-column prop="address" label="创建时间" width="200">
        </el-table-column>
        <el-table-column prop="address" label="状态" width="100">
        </el-table-column>
        <el-table-column prop="address" label="附件"> </el-table-column>
        <el-table-column prop="address" label="操作" width="220">
        </el-table-column>
      </el-table>
    </div>
    <div class="divContent yemaDiv">
      <ul class="ulLeft">
        <li>共条|</li>
        <li>每页条|</li>
        <li>共页</li>
      </ul>
      <ul class="ulRight">
        <el-button
          class="iconfont icon-zhishouye"
          @click="homePage"
          title="至首页"
        ></el-button>
        <el-button
          class="iconfont icon-triangle-left"
          @click="lastPage"
          title="至尾页"
        ></el-button>
        <div class="pages"><el-button>1</el-button></div>
        <el-button
          class="iconfont icon-triangle-right"
          @click="prevPage"
          title="上一页"
        ></el-button>
        <el-button
          class="iconfont icon-zhiweiye"
          @click="nextPage"
          title="下一页"
        ></el-button>
      </ul>
    </div>
    <div class="divContent"></div>
  </div>
</template>

<script>
export default {
  methods: {
    //至首页
    homePage() {},
    //至尾页
    lastPage() {},
    //上一页
    prevPage() {},
    //下一页
    nextPage() {},
    //新增事件
    toaddAirlines() {
      this.$router.push("/addAirlines");
    },
  },
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  height: 100%;
}
//最大的div
.AirlinesDiv {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .divContent {
    width: 100%;
    margin: 0 auto;
    border: 1px solid red;
  }
  //头部功能键
  .herdericon {
    width: 100%;
    border-top: 3px solid #d2d6de;
    padding: 10px 0px;
    //新增按钮
    span {
      background-color: #00a65a;
      color: #fff;
      padding: 5px;
      margin: 5px 0px;
      margin-left: 1%;
      border-radius: 5px;
      cursor: pointer;
      float: left;
    }
    //input和button搜索
    .Menus {
      margin-right: 1%;
      //搜索按钮
      a {
        text-decoration: none;
        float: right;
        padding: 12px;
        border: 1px solid red;
        color: #444477;
        background-color: #f4f4f4;
      }
      //input框
      .el-input {
        border: 1px solid red;
        width: 200px;
        float: right;
      }
    }
  }
  //页码
  .yemaDiv {
    padding: 0 10px;
    height: 50px;
    background-color: #fafafa;
    .pages {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 50px;
      padding: 0px 10px;
    }
    .ulLeft {
      float: left;
      margin-left: 1%;
      li {
        line-height: 50px;
        float: left;
        list-style: none;
      }
    }
    .ulRight {
      float: right;
      margin-right: 1%;
      line-height: 50px;
      text-align: center;
      .el-button {
        font-size: 12px;
        padding: 5px;
      }
    }
  }
}
</style>